<template>
    <view>
        <view>
            <view class = "d"></view>
            <text class = "word">一次性可上传5张照片进行审核</text>
        </view>
        <view>
            <view class = "d"></view>
            <text class = "word">活动总结最多上传10张照片</text>
        </view>
        <view>
            <view class = "d"></view>
            <text class = "word">审核通过的照片不可删除，请联系管理员删除</text>
        </view>
        <uni-card :is-shadow="false" class = "shang">
            <button @click="chooseImages" class = "shc">
                <text class = "scwo">上传文件</text>
            </button>
            <view class = "tishi">请上传横拍照片，大小不超过10M仅支持一般图片格式，如PNG、JPG</view>
            <view >
                <view class = "con" >
                    <view  class = 'image-container' v-for="(image, index) in imageList" :style="boxStyle" :key="index">
                        <view   class = "con1" :style="borderStyle">
                            <image :src="image" mode="aspectFill" class = "pic"></image>
                        </view>
                        <view>
                            <div class = "del" @click = "removeImage(index)">x</div>
                        </view>
                    </view>
                </view>
            </view>
            <text class = "dd" style="position: absolute; bottom: 0px" @click = "fo()" >可继续选择{{remainingImages}}张图片审核</text>

        </uni-card>
        <button class = "bn"  @click = "go">
            <text class = "wo">提交审核</text>
        </button>
    </view>
</template>

<script setup>
import {ref} from "vue"
let imageList = ref([])
let remainingImages = ref(10)

let chooseImages = function(){
    uni.chooseImage({
        count: 5, // 假设最多选择9张图片
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
            imageList.value = [...imageList.value, ...res.tempFilePaths];
            remainingImages.value -= res.tempFilePaths.length;
        }
    })
}
let removeImage = function(index) {
    imageList.value.splice(index, 1)
    remainingImages.value++
}
let go = function(){
    uni.navigateTo({
        url:`../audit/Creat?imageList=${encodeURIComponent(JSON.stringify(imageList.value))}`
    })
}
let fo = function(){
    console.info(imageList)
}
</script>

<style scoped lang = "scss">
.d{
    position: relative;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #166AFF;
    left:12px;
    top:25px
}
.word{
    position:relative;
    width: 164px;
    height: 17px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #6E6E6E;
    top:10px;
    left:20px
}
.shang{
    position:relative;
    height: 300px;
    background: #FFFFFF;
    box-shadow: 0 2px 5px 0 #E2E4EB;
    border-radius: 10px;
    top:5px;
}
.shc{
    position: relative;
    width: 100px;
    height: 30px;
    background: #166AFF;
    border-radius: 15px;
    top:10px;
    margin-bottom: 20px;
}
.scwo{
    position: relative;
    width: 48px;
    height: 17px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #FFFFFF;
    top: -8px
}
.anniu{
    position:relative;
    height: 60px !important;
}
.tishi{
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #999DA3;
}
.bn{
    margin: 10px;
    height: 45px;
    background-image: linear-gradient(90deg, #6CA9FF 0%, #166AFF 100%);
    border-radius: 6px;
    margin-top: 35px;
}
.wo{
    width: 72px;
    height: 25px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 18px;
    color: #FFFFFF;
    text-align: center;
}
.con {
    /* #ifndef APP-NVUE */
    display: flex;
    box-sizing: border-box;
    /* #endif */
    flex-wrap: wrap;
    margin: -5px;
}
.image-container{
    position: relative;
    width: 33.33%;
    height: 0;
    padding-top: 33.33%;
    /* #ifndef APP-NVUE */
    box-sizing: border-box;
    /* #endif */
}
.con1{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 5px;
    border: 1px #eee solid;
    border-radius: 5px;
}
.pic{
    width: 100%;
    height: 100%;
}
.del{
    position:relative;
    left:100px;
    top:-115px
}
.dd{
    margin-bottom: 5px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #212121;
}
</style>
